<template>
  <div class="flex-end m-b-10">
    <el-button type="primary" @click="handleEdit">
      <el-icon><Edit /></el-icon>
      编辑
    </el-button>
  </div>
  <el-table class="table" :span-method="objectSpanMethod" :data="tableData" border style="width: 100%">
    <el-table-column>
      <el-table-column label="Date">
        <el-table-column label="1" prop="date" align="center" />
      </el-table-column>
      <el-table-column prop="name" label="Name">
        <el-table-column label="2" prop="address" align="center" />
      </el-table-column>
      <el-table-column label="Address">
        <el-table-column label="4" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="Address">
        <el-table-column label="5" prop="name" align="center" />
      </el-table-column>
    </el-table-column>

    <el-table-column align="center" label="截止2021年底查明资源储量及年度变化情况">
      <el-table-column label="类型编码" align="center">
        <el-table-column label="6" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="7" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="8" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="9" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="10" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="11" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="12" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="13" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column prop="name" label="14" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="3" prop="name" align="center" />
      </el-table-column>
      <el-table-column label="类型编码" align="center">
        <el-table-column label="15" prop="name" align="center" />
      </el-table-column>
    </el-table-column>
  </el-table>
  <t-dialog v-model:visible="dialogVisible" title="资源储量和质量" width="62%">
    <resource-reserve-edit :data="dialogData"></resource-reserve-edit>
    <template #footer="{ close }">
      <div class="dialog-footer">
        <el-button type="primary" plain @click="addDialogData">插入</el-button>
        <!-- <el-button type="danger"  plain @click="delDialogData">删除</el-button> -->
        <el-button type="success" plain @click="close">退出</el-button>
      </div>
    </template>
  </t-dialog>
</template>

<script setup>
import { dataMethod } from '@/utils/rowCol.js';
import { Edit } from '@element-plus/icons-vue';
import resourceReserveEdit from './resource-reserve-edit.vue';

const tableData = [
  {
    date: '铁',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '铁',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '铁',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '铁',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
];

const spanObj = dataMethod(tableData, ['date', 'address']); // 指定date、name列合并
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //列合并
  let _row = spanObj[column.property] ? spanObj[column.property][rowIndex] : 1;
  let _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col
  };
}

//弹窗编辑
const dialogVisible = ref(false);

function handleEdit(params) {
  dialogVisible.value = true;
}

const dialogData = ref([{}]);
//弹窗数组新增
const addDialogData = () => {
  dialogData.value.push({});
};
// 弹窗数组删除
// const delDialogData = () => {
//   dialogData.value.splice(selectSubscript.value - 1, 1);
// };
</script>
